<template>
     <van-nav-bar title="分类管理" left-text="返回" left-arrow @click-left="$router.back()"></van-nav-bar>
     <div class="category-container">
        <div class="category-list">
          <div v-for="item in data.list" :key="item.id" class="category-item">
            <div class="category-content">
              <img v-if="item.coverPicUrl" :src="item.coverPicUrl" class="category-image" alt="分类图片">
              <div class="empty-slot" v-else>暂无图片</div>
              <div class="category-info">
                <span class="category-name">{{ item.name }}</span>
              </div>
              <div class="category-actions">
                <van-icon name="edit" size="20" class="edit-icon" @click="handleEdit(item)" />
                <van-icon name="list-switch" size="20" class="edit-icon" @click="handleCategory(item)"/>
              </div>
            </div>
          </div>
          <div v-if="data.list.length === 0" class="empty-tip">暂无分类数据</div>
        </div>
     </div>
     <div class="bottom-fixed-button">
        <div @click="goToAdd"><van-icon name="plus" /> 添加分类</div>
     </div>
</template>


<script setup>
import { ref, onMounted } from 'vue'
import { http } from '../../utils/request'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()

const data = ref({
    list: []
})

const getFirstLevelCategory = async () => {
    try {
        const res = await http.get('/category/getFirstLevelCategory')
        data.value.list = res || []
    } catch (error) {
        showToast('获取分类数据失败')
    }
}

const handleEdit = (item) => {
    showToast(`编辑分类：${item.name}`)
    router.push(`/update_category?id=${item.id}`)
    // 这里可以跳转到编辑页面或打开编辑弹窗
    // 例如：router.push(`/category-edit/${item.id}`)
}

const handleCategory = (item) => {
  router.push(`/second_category?id=${item.id}&name=${item.name}`)
} 

const goToAdd = () => {
  router.push('/add_category')
}

onMounted(() => {
    getFirstLevelCategory()
})
</script>

<style scoped>
.category-container {
  padding: 12px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 46px);
  padding-bottom: 70px; /* 为底部按钮留出空间 */
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-item {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.3s ease;
}

.category-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.category-content {
  display: flex;
  align-items: center;
  padding: 12px;
}

.category-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  background-color: #f5f5f5;
}

.category-info {
  flex: 1;
  margin-left: 12px;
}

.category-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  display: block;
}

.category-actions {
  padding-left: 12px;
}

.edit-icon {
  color: #999;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.edit-icon:hover {
  background-color: rgba(25, 137, 250, 0.1);
}

.empty-tip {
  text-align: center;
  color: #969799;
  padding: 30px 0;
  font-size: 14px;
}
.bottom-fixed-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
  font-size: 16px;
}

.empty-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    font-size: 12px;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    color: #999;
}
</style>